<template>
  <div class="home">
    <!-- 轮播图 -->
    <el-carousel type="card" height="300px" :interval="1500">
      <el-carousel-item v-for="item in bannerList" :key="item._id">
        <router-link :to="{ name: 'detail', params: { menuId: item.menuId } }">
          <img :src="item.product_pic_url" alt="" width="100%" />
        </router-link>
      </el-carousel-item>
    </el-carousel>

    <!-- 内容精选: 瀑布流形式 -->
    <div>
      <h2>内容精选</h2>
      <waterfall :isLoading="isLoading" @loadMore="loadMore">
        <menu-card :info="menuList" :marginLeft="13" />
      </waterfall>
      <h5 class="tip" v-show="showTip">到底啦 ... ...</h5>
    </div>
  </div>
</template>

<script>
import waterfall from "@/components/waterfall.vue";
import MenuCard from "@/components/menu-card.vue";
import { getBanner, getMenus } from "@/service";

export default {
  components: { waterfall, MenuCard },

  data() {
    return {
      bannerList: [],
      menuList: [],
      isLoading: false,
      showTip: false,
    };
  },

  mounted() {
    /* 轮播图数据 */
    getBanner().then((res) => {
      this.bannerList = res.data.list;
    });

    this.page = 1; // 非响应式数据；置于 data 外部
    /* 内容精选 */
    getMenus({ page: this.page }).then((res) => {
      // console.log(res);
      this.menuList = res.data.list;
      this.totalPage = Math.ceil(res.data.total / res.data.page_size);
    });
  },

  methods: {
    loadMore() {
      this.isLoading = true;
      if (++this.page > this.totalPage) {
        this.showTip = true;
        this.isLoading = false;
        return;
      }
      getMenus({ page: this.page }).then((res) => {
        // console.log(res);
        this.menuList = [...this.menuList, ...res.data.list];
        this.isLoading = false;
      });
    },
  },
};
</script>

<style>
.home h2 {
  text-align: center;
  padding: 20px 0;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.tip {
  width: 100%;
  height: 20px;
  text-align: center;
}
</style>